<template>
  <div style="background: #409EFF;height: 100%">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#409EFF"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">查看分享</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的网盘</template>
        <el-menu-item index="2-1"><a href="/#/disk/index" >我的文件</a></el-menu-item>
        <el-menu-item index="2-2"><a href="/#/disk/share" >我的分享</a></el-menu-item>
        <el-menu-item index="2-3"><a href="/#/disk/image" >我的相册</a></el-menu-item>
      </el-submenu>
      <el-menu-item style="right: 0px;position: absolute" index="5"><a href="/">登录</a> </el-menu-item>
    </el-menu>

    <div style="height: 100%;width: 100%;background-color: #fff">
      <div v-if="!showEmpty" style="background-color: #ddd;height: 100%;width: 100%;align-content: center;">
        <div style="width: 80%;background-color: #fff;height: 100%;position: relative;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;">
          <div class="file-header">
            {{user.username}} 分享的文件[{{share.title}}]:
          </div>
          <el-row>
            <el-tooltip class="item" effect="dark" content="若该分享文件包含违规内容,请提交给管理员!" placement="bottom">
              <el-button type="warning" @click="showJB= !showJB" round>投诉/举报</el-button>
            </el-tooltip>
          </el-row>
          <div class="file-item" v-for="file in folders"  >

            <div class="file-item-select">
              <div class="file-item-select-item"><el-checkbox class="file-select" ref="itemCheck" @change="itemChange(this,file.id)" size="medium" label="" name="type"></el-checkbox></div>
              <div class="file-item-select-item" >...</div>
            </div>

            <div style="height: 100px">
              <svg  class="icon disk-icon" aria-hidden="true">
                <use xlink:href="#icon-folder"></use>
              </svg>
            </div>
            <div class="file-msg">
              <div ><div class="file-name">
                {{file.folderName}}</div></div>
              <div class="file-createTime" v-text="file.createTime"></div>
            </div>

          </div>

          <div class="file-item" v-for="file in files"  >

            <div class="file-item-select">
              <div class="file-item-select-item"><el-checkbox class="file-select" ref="itemCheck" @change="itemChange(this,file.id)" size="medium" label="" name="type"></el-checkbox></div>
              <div class="file-item-select-item" ><el-button type="success" icon="el-icon-download" @click="downloadFile(file)" circle></el-button></div>
            </div>
<!--            <el-button style="float: left" type="primary" icon="el-icon-view" circle @click="menuPreview"></el-button>-->

            <div style="height: 100px">
              <svg  class="icon disk-icon" aria-hidden="true">
                <use :xlink:href="'#icon-'+ (file.bucketName == 'blank' ? file.fileSuffix :file.fileSuffix)"  ></use>
              </svg>
            </div>


            <div class="file-msg">
              <div class="file-msg-one" ><div class="file-name">
                {{file.fileName}}


              </div></div>
              <div class="file-createTime" v-text="file.createTime"></div>
            </div>
          </div>
        </div>

      </div>

      <div v-if="showJB" class="box-card" style="z-index: 1000;padding-top:50px;padding-right:30px;background-color: #fff">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input disabled v-model=" '关于'+user.username+' 分享的文件['+share.title+']的投诉'"></el-input>
          </el-form-item>
<!--          <el-form-item label="活动区域">-->
<!--            <el-select v-model="form.region" placeholder="请选择活动区域">-->
<!--              <el-option label="区域一" value="shanghai"></el-option>-->
<!--              <el-option label="区域二" value="beijing"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="活动时间">-->
<!--            <el-col :span="11">-->
<!--              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>-->
<!--            </el-col>-->
<!--            <el-col class="line" :span="2">-</el-col>-->
<!--            <el-col :span="11">-->
<!--              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>-->
<!--            </el-col>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="即时配送">-->
<!--            <el-switch v-model="form.delivery"></el-switch>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="活动性质">-->
<!--            <el-checkbox-group v-model="form.type">-->
<!--              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
<!--              <el-checkbox label="地推活动" name="type"></el-checkbox>-->
<!--              <el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
<!--              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
<!--            </el-checkbox-group>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="特殊资源">-->
<!--            <el-radio-group v-model="form.resource">-->
<!--              <el-radio label="线上品牌商赞助"></el-radio>-->
<!--              <el-radio label="线下场地免费"></el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交举报信息</el-button>
            <el-button @click="showJB = !showJB">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-empty v-if="showEmpty" :description="message"  :image-size="400" image="/img/nothing.png"></el-empty>
      <el-card v-if="showCard" :body-style="bodyStyle" :header="header" class="box-card">
        <div slot="header" class="box-head">

            <el-avatar :size="50" style=";" src="/img/xiaoyu.jpg"></el-avatar>
          <el-row style="position: absolute;top: 20px;left:80px;">
            <span>{{ user.username }} 分享的文件：{{ share.title }}</span>
            <el-button style="float: right; padding: 3px 0" @click="this.showCard = false" type="text">关闭</el-button>
            <span style="font-weight: normal;font-size: 12px;"><br/>描述：{{share.description}}</span>

          </el-row>
          </div>
        <div class="box-input">
          <span style="font-weight: bold;">请输入提取码：</span>
          <el-row align="center">
            <el-input type="password" style="margin-top: 20px;width: 80%;" v-model="password"></el-input>
            <el-button type="primary" style="margin-left: 20px" @click="submitPwd" >提取文件</el-button>
          </el-row>

        </div>
      </el-card>
    </div>

  </div>

</template>

<script>
import {getByPath,getByPathAndPwd,deleteShareId} from "@/api/disk/share"
import {saveComplaint} from "@/api/disk/complaint"
export default {
  name:"index",
  data() {
    return {
      form:{
        message:'',
        type:'share',
        flag:'1',
        itemId:''
      },
      showJB:false,
      files:[],
      folders:[],
      hasPassword:true,
      path:"",
      password:"",
      header:"background-color: #562;",
      bodyStyle:{
        padding:'0px',
        "background-color": "#fff"
      },
      share:{},
      user:{
        username: '游客用户'
      },
      message:"没有任何文件！",
      showCard:false,
      showEmpty:true,
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  created() {
    this.path = this.$route.query.path;
    this.password = this.$route.query.password;
    if (this.path == "" || this.path == null || this.path == undefined){
      this.showCard = false;
      this.message = "未找到分享文件,请检查路径是否正确!";
    }else{
      this.findShare();
    }
  },
  mounted() {        //写在mounted或者activated生命周期内即可
    window.onbeforeunload = e => {
      this.path = this.$route.query.path;
      this.password = this.$route.query.password;
      if (this.path == "" || this.path == null || this.path == undefined){
        this.showCard = false;
        this.message = "未找到分享文件,请检查路径是否正确!";
      }
      // //刷新时弹出提示
      // return ''
    };
  },
  methods: {
    onSubmit(){



      if (this.form.description == "" ||  this.form.description == null || this.form.description==undefined){
        this.$message.error("请填写投诉描述信息!");
      }else{
        //
        this.form.itemId = this.share.id;
        this.form.flag = '1';
        this.form.type = 'share';
        this.form.message = this.form.description;
        saveComplaint(this.form).then(re=>{
          if (re.data.code == "0"){
            this.$message.success(re.data.msg);
            this.showJB = false;
          }
        })


      }
    },
    downloadFile(file){
      location.href="http://localhost:9999/disk/file/download/"+file.filePath;
      this.$notify({
        title: '文件开始下载',
        message: ''+file.fileName,
        type: 'success'
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    findShare(){
      console.log("path:"+this.path)
      getByPath(this.path).then(re=>{
        console.log("==获取==")
        console.log(re.data)
        this.hasPassword = re.data.data.hasPassword;
        if (re.data.code == 1){
          //分享失效
          this.message = re.data.msg
          this.showCard = false;
        }else {
          //获取成功
          this.share = re.data.data.share;
          this.user = re.data.data.user;
          this.hasPassword = re.data.data.hasPassword
          if (this.hasPassword){
            //需要输入密码
            this.showCard = true;
          }else{
            //无需密码
            this.showCard = false;
            this.$message.success(re.data.msg);
            this.files = re.data.data.files;
            this.folders = re.data.data.folders;
            if (this.files != null || this.folders!=null){
              this.showEmpty = false;
            }

          }
        }

      }).catch((re)=>{
        this.showCard = false;
        // this.message = "获取失败,请稍后再试!";
      })
    },
    submitPwd(){
      getByPathAndPwd(Object.assign({
        path: this.path,
        password: this.password
      })).then(re=>{
        if (re.data.code == 1){
          // this.$message.error(re.data.msg)
          this.message = re.data.msg;
        }else{

          this.share = re.data.data.share;
          this.showCard = false;
          this.hasPassword = false;
          this.$message.success(re.data.msg);
          this.files = re.data.data.files;
          this.folders = re.data.data.folders;
          console.log(this.files != null)
          console.log(this.folders != null)
          if (this.files != null || this.folders!=null){
            this.showEmpty = false;
          }
        }


      }).catch(()=>{
        this.showCard = false;
        this.message = "获取失败,请稍后再试!";
      });

    }
  }
}
</script>

<style scoped>
.el-menu-demo{
  width: 100%;
  padding-left: 200px;
  font-weight: bolder;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.el-card__body{
  background-color: #fff!important;
}
.box-head{
  color: #fff;
  font-weight: bolder;
  font-size: 18px;
  /*background-color: #0fe8cf;*/
}
.box-input{
  background-color: #fff;
  height: 100%;
  padding:20px;
  margin-top: 20px;
}
.box-card {
  border-radius: 20px;
  width: 600px;
  position:fixed;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  height:300px;
  /*background-color: #409EFF;*/
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .12), 10px 10px 12px rgba(0, 0, 0, .04)
}
.el-card /deep/ .el-card__header {
  background-color: #409EFF;
}


.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.disk-icon{
//background-color: #19be6b;
  height: 120px!important;
  width: 100px!important;
}
.file-item{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  float: left;
  width: 150px;
  margin: 10px;
//background-color: #ed3f14;
  height: 180px;
  border-radius: 10px;

}
.file-item:hover{
  opacity: 0.9;
  background-color: #c8c9cb;
}
.file-item-select-item{
  width: 20px;
  display: none;
}
.file-item:hover .file-item-select-item{
  display: block;
}
.file-select:checked{
  display: block;
}
.file-item-select{
//height: 30px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-self: flex-start;
}
.file-msg{
  font-weight: bold;
  margin-top: 20px;
  width: 100%;
  height: 50px;
//background-color: #2d8cf0;
}
.file-name{

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
//font-size: 20px;
}
.file-createTime{

  margin-top: 10px;
  font-size: 13px;
  text-align: center;
}
</style>
